<template>
  <!-- 此页面为用户首页 -->
  <div class="container">
    <!-- header 头部区域 -->
    <div class="header">
      <img src="@/assets/menu/pc_new_logo.png" alt="" />
      <div class="purify">
        <div v-if="showname" class="purify-login">
          <router-link to="/userLogin">登录/注册 &nbsp;</router-link>
        </div>
        <div class="house-font" v-else>
          <span @click="dialogFormVisible = true">个人信息</span>
          <span @click="getFindOrder()"> 我的订单</span>
          <span class="margin-left" @click="becomeHost()" v-if="showhouse"
            >成为房东</span
          >
          <span v-else-if="showhost" @click="Hostmanagement" class="margin-left"
            >进入后台</span
          >
          <button @click="loginout()">退出登录</button>
        </div>
      </div>
    </div>
    <!-- 用户登录后修改信息区域 -->
    <el-dialog title="个人信息" :visible.sync="dialogFormVisible" width="40%">
      <el-form :model="form" label-width="180px">
        <el-form-item label="姓名">
          <el-input v-model="form.uname" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="身份证">
          <el-input
            v-model="form.idcard"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input
            v-model="form.username"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.phone" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="修改密码">
          <el-input
            v-model="form.password"
            autocomplete="off"
            type="number"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="getUpdate()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 订单区域 -->
    <div class="order">
      <el-dialog title="我的订单" :visible.sync="orderdialogFormVisible">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="billNumber" label="订单号" width="100">
          </el-table-column>
          <el-table-column prop="address" label="详细地址"> </el-table-column>
          <el-table-column prop="roomNum" label="房间号"> </el-table-column>
          <el-table-column prop="price" label="价格"> </el-table-column>
          <el-table-column prop="checkInTime" label="入住时间">
          </el-table-column>
          <el-table-column prop="checkOutTime" label="退房时间">
          </el-table-column>
          <el-table-column prop="billTime" label="下单时间"> </el-table-column>
          <el-table-column prop="score" width="150" label="评分">
            <template #default="{ scoped, row }">
              <el-rate
                v-model="row.score"
                text-color="#ff9900"
                @change="shows(row, scoped)"
                :disabled="row.status === 5"
              >
              </el-rate>
            </template>
          </el-table-column>
        </el-table>
        <div slot=" footer" class="dialog-footer">
          <el-button @click="orderdialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="orderdialogFormVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
    <!-- main 中间区域 -->
    <div class="main">
      <!-- 轮播图区域 -->
      <div class="carousel">
        <el-carousel :interval="5000" height="500px">
          <el-carousel-item v-for="item in imgList" :key="item.id">
            <img :src="item.idView" alt="" class="carouselimg" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 城市搜索 -->
      <div class="citysearch">
        <span>请输入城市:</span>
        <el-select
          v-model="findCity"
          filterable
          placeholder="请选择城市"
          style="width: 80%"
        >
          <el-option
            v-for="item in Cityvalue"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <div>
          <button @click="getFindCity()">搜索城市</button>
        </div>
      </div>
      <!-- 搜索房源区域 -->
      <div class="houesSearch">
        <div class="allhouse">全部房源</div>
        <div>
          朝向：
          <el-select
            v-model="inputValue"
            clearable
            placeholder="请选择房屋朝向"
          >
            <el-option
              v-for="item in towards"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="rent">
          租金：
          <el-input placeholder="请输入最小租金" v-model="input1" clearable>
          </el-input>
          <span class="reach">-</span>
          <el-input placeholder="请输入最大租金" v-model="input2" clearable>
          </el-input>
        </div>
        <div class="squaremetre">
          面积㎡:
          <el-input placeholder="请输入最小面积" v-model="input3" clearable>
          </el-input>
          <span class="reach">-</span>
          <el-input placeholder="请输入最大面积" v-model="input4" clearable>
          </el-input>
        </div>
        <div>
          <button @click="findHouse()">搜索房源</button>
        </div>
        <div>
          <el-button @click="getHomeList()" type="primary">重置</el-button>
        </div>
      </div>
      <hr />
      <div class="room-information">
        <!-- 房源信息 -->
        <div class="house-information" v-for="item in list" :key="item.id">
          <div class="left">
            <img :src="item.houseImage" alt="" />
          </div>
          <router-link :to="`/houseinformation/${item.id}`">
            <div class="center">
              <div style="display: flex">
                <img
                  src="@/assets/热门.png"
                  alt=""
                  style="width: 20px; height: 20px"
                />
                <h4>热门房源</h4>
              </div>
              <h2>{{ item.houseTitle }}</h2>
              <p>
                <img src="@/assets/menu/房间.png" alt="" />
                {{ item.houseModel }} 丨 {{ item.houseArea }}㎡ 丨
                {{ item.houseStyle }} 丨 {{ item.houseFloor }} 丨
                {{ item.houseType }}
              </p>
              <p>
                <img src="@/assets/menu/地点.png" alt="" />
                {{ item.houseAddress }}
              </p>
              <div class="start">
                <el-rate
                  v-model="item.score"
                  text-color="#ff9900"
                  disabled
                >
                </el-rate>
              </div>
            </div>
          </router-link>
          <div class="right">{{ item.price }}<span>元/日</span></div>
        </div>
      </div>
    </div>
    <!-- footer底部区域 -->
    <div class="footer">
      <div class="information">
        <div class="guarantee">
          <img src="@/assets/menu/城市.png" alt="" />
          <h5>放心入住</h5>
          <div class="font">千万保障先行赔付</div>
        </div>
        <div class="guarantee">
          <img src="@/assets/menu/24小时前台.png" alt="" />
          <h5>贴心服务</h5>
          <div class="font">7*24小时服务</div>
        </div>
        <div class="guarantee">
          <img src="@/assets/menu/认证.png" alt="" />
          <h5>信用认证</h5>
          <div class="font">实命认证更放心</div>
        </div>
      </div>
      <!-- 联系方式 -->
      <div class="contact">
        <div class="contit"></div>
        <div class="contall">
          <div class="conleft">
            <div class="titwl"></div>
            <div class="lxisw">
              <p>
                电话:
                <span> 0854-3526777 0854-3526777 </span>
              </p>
              <p>
                手机:
                <span> 13518516777 </span>
              </p>
              <p>
                邮箱:
                <span> 18085466777@163.com</span>
              </p>
              <p>
                地址:
                <span> 四川省成都市武侯区3-2</span>
              </p>
            </div>
          </div>
          <div class="conright">
            <div class="rightop">
              <div class="minsu"></div>
              <div class="minsuimg">
                <img src="@/assets/menu/cont.jpg" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="rightbot"></div>
    </div>
    <hr class="secondhr" />
    <div class="lowfooter">
      <span>川ICP备19005288号-2 </span>
      <img src="@/assets/menu/1653361513433_5709.png" alt="" />
    </div>
  </div>
</template>
<script>
import {
  getHomeAPI,
  getFindOrderAPI,
  getRateAPI,
  getFindCityAPI,
  getBecameHostAPI,
  getFindUserPAI
} from '@/api/Home/getHomeAPI'
import { getUpdatePAI } from '@/api/getLoginAPI'
export default {
  data() {
    return {
      list: [],
      showname: true, // 判断是否已登录
      showhouse: true,
      showhost: true,
      phone: localStorage.getItem('phone'),
      id: localStorage.getItem('id'),
      idcard: localStorage.getItem('idcard'),
      uname: localStorage.getItem('uname'),
      username: localStorage.getItem('username'),
      password: localStorage.getItem('password'),
      state: localStorage.getItem('state'),
      towards: [
        {
          value: '南',
          label: '南'
        },
        {
          value: '北',
          label: '北'
        },
        {
          value: '东',
          label: '东'
        },
        {
          value: '选项4',
          label: '西'
        },
        {
          value: '东北',
          label: '东北'
        },
        {
          value: '东南',
          label: '东南'
        },
        {
          value: '西南',
          label: '西南'
        },
        {
          value: '西北',
          label: '西北'
        }
      ],
      inputValue: '',
      findCity: '',
      Cityvalue: [],
      imgList: [
        { id: 0, idView: require('@/assets/menu/minsu001.jpg') },
        { id: 2, idView: require('@/assets/menu/minsu002.jpg') },
        { id: 3, idView: require('@/assets/menu/minsu003.jpg') },
        { id: 4, idView: require('@/assets/menu/minsu004.jpg') }
      ],
      dialogFormVisible: false,
      orderdialogFormVisible: false,
      form: {
        uname: localStorage.getItem('uname'),
        password: localStorage.getItem('password'),
        idcard: localStorage.getItem('idcard'),
        phone: localStorage.getItem('phone'),
        username: localStorage.getItem('username'),
        id: localStorage.getItem('id')
      },
      input1: '',
      input2: '',
      input3: '',
      input4: '',
      tableData: [
        {
          billNumber: '',
          address: '',
          roomNum: '',
          price: '',
          checkInTime: '',
          checkOutTime: '',
          billTime: '',
          id: '',
          score: ''
        }
      ],
      orderid: '',
      params: {
        page: 1,
        size: 10
      },
      remarksform: {},
      startValue: 0,
      value1: 1,
      disabled: false
    }
  },
  methods: {
    // 用户评分
    async shows(row) {
      let { data: res } = await getRateAPI({ id: row.id, score: row.score })
      if (row.status === 5) {
        this.disabled = true
      }
      this.getFindOrder()
    },

    // 获取页面数据
    async getHomeList() {
      if (this.state !== '0') {
        this.showhouse = false
      }
      if (this.state !== '2') {
        this.showhost = false
      }
      let params = {
        page: 1,
        size: 4
      }
      let { data: res } = await getHomeAPI(params)
      this.list = res.data.houses
      this.inputValue = ''
      this.input1 = ''
      this.input2 = ''
      this.input3 = ''
      this.input4 = ''
    },
    async queryCity() {
      const { data: res } = await getFindCityAPI({ delflag: 0 })
      this.Cityvalue = res.data.allCity
    },
    // 查询城市
    async getFindCity() {
      let { data: res } = await getHomeAPI({
        houseCity: this.findCity,
        page: this.params.page,
        size: this.params.size
      })
      this.list = res.data.houses
    },
    // 查找房源
    async findHouse() {
      let params = {
        page: 1,
        size: 10,
        houseOriented: this.inputValue,
        lowArea: this.input3,
        higArea: this.input4,
        lowPrice: this.input1,
        higPrice: this.input2
      }
      let { data: res } = await getHomeAPI(params)
      if (res.data.totalElements === 0) {
        this.$message({
          message: '未查询到房源',
          type: 'error'
        })
      } else {
        this.list = res.data.houses
      }
    },
    // 修改用户信息
    async getUpdate() {
      let params = {
        username: this.form.username,
        password: this.form.password,
        id: this.id
      }
      let { data: res } = await getUpdatePAI(params)
      if (res.code === 20031) {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
        this.dialogFormVisible = false
      } else {
        this.$message.error('修改失败，请重新按要求输入输入')
      }
    },
    // 成为房东
    async becomeHost() {
      localStorage.setItem('state', '1')
      if (this.state !== '0') {
        this.showhouse = false
        this.getHomeList()
      }
      let params = {
        id: localStorage.getItem('id'),
        state: localStorage.getItem('stats')
      }
      let { data: res } = await getBecameHostAPI(params)

      if (res.code === 20031) {
        this.$message({
          message: '提交成功,正在审核,请耐心等待',
          type: 'success'
        })
        if (this.state > 0) {
          this.showhouse = false
          this.getHomeList()
        }
      }
    },
    Hostmanagement() {
      if (localStorage.getItem('userRole') === '房东') {
        this.$router.push('/menu/housing')
      } else {
        this.$router.push('/menu/user')
      }
    },
    // 退出登录
    loginout() {
      this.$confirm('此操作将注销登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          localStorage.removeItem('uname')
          localStorage.removeItem('idcard')
          localStorage.removeItem('password')
          localStorage.removeItem('username')
          localStorage.removeItem('phone')
          localStorage.removeItem('id')
          localStorage.removeItem('token')
          localStorage.removeItem('state')
          localStorage.removeItem('userRole')
          this.$router.replace('/homeStay')
          this.showname = true
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    },
    // 用户查看订单
    async getFindOrder() {
      this.orderdialogFormVisible = true
      let params = {
        page: 1,
        size: 10,
        userId: localStorage.getItem('id')
        // userId: 38
      }
      let { data: res } = await getFindOrderAPI(params)
      this.tableData = res.data.bills
    }
  },
  created() {
    this.getHomeList()
    this.queryCity()

    if (this.phone === null) {
      this.showname = true
    } else {
      this.showname = false
    }
  },

  components: {}
}
</script>
<style scoped>
.header {
  display: flex;
  justify-content: space-around;
  background: #ffffff;
  border-bottom: 5px solid #ff9180;
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  z-index: 1;
}
.house-font {
  color: #ffffff;
  display: inline-block;
  padding: 0 16px;
  background: #ff9180;
  border-radius: 6px;
  height: 39px;
  line-height: 39px;
  margin: 10px;
}
.header span {
  background: 0;
  color: #ffffff;
  text-decoration: none;
}
.main {
  margin-top: 80px;
}
.purify-login {
  margin: 15px;
}

.purify :nth-child(1) a {
  color: black;
  text-decoration: none;
  font-size: 14px;
}
.purify :nth-child(2) a {
  color: #ffffff;
}
.purify button {
  border: 0;
  background: #ff9180;
  font-size: 14px;
  color: #ffffff;
  margin-left: 10px;
  text-decoration: none;
}
.carousel {
  margin: 20px 0px;
  z-index: -1;
  position: relative;
}
.carousel img {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.citysearch {
  display: flex;
  justify-content: space-around;
  width: 30em;
  height: 3em;
  position: relative;
  top: -20em;
  left: 30em;
}
.citysearch span {
  border-radius: 6px;
  background: #ff9180;
  color: #ffffff;
  width: 250px;
  height: 39px;
  line-height: 39px;
  text-align: center;
  margin-right: 10px;
}
.citysearch button {
  border: none;
  margin-left: 0.5em;
  background: #ff9180;
  color: #ffffff;
  border-radius: 6px;
  width: 100px;
  height: 39px;
  line-height: 39px;
  text-align: center;
}

.houesSearch {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.houesSearch button {
  border: none;
  margin-left: 2em;
  background: #ff9180;
  color: #ffffff;
  border-radius: 6px;
  height: 39px;
  line-height: 39px;
  padding: 0 16px;
}
.rent {
  margin-left: 1em;
}
.reach {
  margin: 0 1em;
}
.squaremetre {
  margin-left: 1em;
}
.allhouse {
  position: relative;
  top: -3em;
  left: 5em;
  margin: 5px;
  display: inline-block;
  padding: 0 16px;
  background: #ff9180;
  color: #ffffff;
  border-radius: 6px;
  height: 39px;
  line-height: 39px;
}
.houesSearch .el-input {
  width: 230px;
}
.room-information {
  margin: 1em;
}
.houseAll {
  margin: 12em;
}
.house-information {
  max-width: 70em;
  margin: auto;
  margin-top: 0px;
  display: flex;
  justify-content: space-around;
}
.house-information a {
  color: black;
  text-decoration: none;
}
.house-information .left {
  width: 300px;
  height: 300px;
}
.left img {
  width: 100%;
  height: 100%;
}
.house-information .center {
  width: 500px;
  height: 300px;
  margin-top: 120px;
}
.center p:nth-child(1) {
  font-size: 20px;
  font-weight: 700;
  margin: 10px;
}
.center p:nth-child(n + 2) {
  margin: 30px 0 0 10px;
  color: #bfbfbf;
}
.house-information .right {
  width: 300px;
  height: 300px;
  text-align: center;
  line-height: 300px;
  font-size: 25px;
  color: #ff9180;
}
.right span {
  font-size: 10px;
}
.house-information div {
  margin: 100px 0 50px 0;
}
.footer {
  margin-top: 100px;
}
.information {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex: 1;
}
.information img {
  max-width: 3rem;
}
.information h5 {
  margin-top: 5px;
  font-size: 18px;
  font-weight: 700;
  line-height: 18px;
}
.information div {
  text-align: center;
  margin-top: 10px;
}
.font {
  margin-top: -10px;
  font-size: 14px;
  color: #999;
  line-height: 14px;
}
.contall {
  display: flex;
  justify-content: space-around;
}
.contit {
  width: 59.15em;
  height: 3.75em;
  background-image: url(@/assets/menu/cot.png);
  background-size: cover;
  margin: 0 auto 3.5em;
  margin-top: 50px;
}
.titwl {
  width: 23.15em;
  height: 8em;
  background-image: url(@/assets/menu/conti.png);
  background-size: cover;
  margin-bottom: 4em;
}
.lxsiw {
  width: 100%;
  height: 8em;
  padding-left: 1.5em;
}
.rightop {
  width: 28.6em;
  height: 22.5em;
  background: #f5d1b5;
  position: relative;
  padding-top: 1em;
  padding-left: 4em;
  left: -2em;
}
.minsu {
  width: 2.85em;
  height: 6.85em;
  background-image: url(@/assets/menu/民宿.png);
  background-size: cover;
  position: absolute;
  right: 0.5em;
  bottom: -3em;
}
.minsuimg {
  width: 20em;
  height: 20.5em;
  overflow: hidden;
}
.minsuimg img {
  display: block;
  width: 100%;
  height: 100%;
  transition: all 1.2s;
}
.minsuimg :hover {
  transform: scale(1.4);
}
.rightbot {
  width: 19.8em;
  height: 5.5em;
  background-image: url(@/assets/menu/conbt.png);
  position: relative;
  top: -40px;
  left: 300px;
}
hr {
  background-color: #f5d1b5;
  height: 2px;
  border: none;
}
.secondhr {
  width: 80%;
  margin: auto;
}
.lowfooter {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 30px;
}
.lowfooter span {
  margin: 5px;
  font-size: 16px;
  color: #999;
}
.lowfooter img {
  width: 30px;
}
.el-input {
  width: 300px;
}
.margin-left {
  margin-left: 10px;
}
.start {
  position: relative;
  bottom: 60px;
  left: 12px;
}
</style>
